<template>
  <div class="container">
    <template v-if="canPay">
      <AliPay v-if="payType === 1" :orderId="orderId"></AliPay>
      <WeChat v-if="payType === 2" :orderId="orderId"></WeChat>
      <h1 v-else>
        请使用支付宝或微信扫码支付
      </h1>
    </template>
  </div>
</template>

<script>
  import AliPay from "./AliPay";
  import WeChat from "./WeChat";
  export default {
    name: "Pay",
    components: {AliPay, WeChat},
    data() {
      return {
        canPay: false,
        payType: 0,
        orderId: "",
      }
    },
    methods: {
      checkOrder() {
        this.$requests.post("/order/checkPay", {orderId: this.orderId}).then(res => {
          if (res.data.code === 0) {
            this.canPay = true;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
    },
    created() {
      const ua = navigator.appVersion;
      if (ua.indexOf("AliApp") > -1) {
        this.payType = 1;
      } else if (ua.indexOf("MicroMessenger") > -1) {
        this.payType = 2;
      } else {
        this.payType = 0;
      }
    },
    mounted() {
      this.orderId = this.$route.query.orderId;
      const token = this.$route.query.token;
      if (!this.orderId) {
        this.$Message.error("订单数据异常");
      } if (!token) {
        this.$Message.error("用户数据异常");
      } else {
        sessionStorage.setItem("token", token);
        this.checkOrder();
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    height: 100%;
  }
</style>
